<template>
	<div id="pro">
		<el-row>
			<hr style="height:1px;border:none;border-top:1px solid #555555; margin-bottom: 10px;" />
			<div id="top">
				<div id="top-left1">
					<el-button type="info" icon="el-icon-plus" size="small" @click="addproduct">新增</el-button>
				</div>
				<div id="top-left1">
					<el-button type="info" icon="el-icon-search" size="small">查看</el-button>
				</div>
				<div id="top-left1">
					<el-button type="info" icon="el-icon-refresh" size="small" @click="winReload">刷新</el-button>
				</div>
				<div id="top-left1">
					<el-dropdown>
						<el-button type="primary" size="small">
							<i class="el-icon-arrow-down el-icon--left"></i>批量操作
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>批量删除</el-dropdown-item>
							<el-dropdown-item>批量打印</el-dropdown-item>
							<el-dropdown-item>关闭批量操作</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</el-row>

		<el-row>
			<div id="prohead-left1">
				产品查询
			</div>
			<div id="prohead-left2">
				<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search">
				</el-input>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table ref="multipleTable" :data="tableproduct.filter(data => !search || data.proId.toLowerCase().includes(search.toLowerCase()))" 
					tooltip-effect="dark" style="width: 98%" height="600" @selection-change="handleSelectionChange"  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column fixed label="产品编号" width="80">
						<template slot-scope="scope">
							{{ scope.row.proId }}
						</template>
					</el-table-column>
					<!-- <el-table-column fixed prop="proPic" label="图片" width="100"></el-table-column> -->
					<el-table-column fixed prop="proName" label="产品名称" width="140"></el-table-column>
					<el-table-column fixed prop="proSpe" label="规格" width="150"></el-table-column>
					<el-table-column prop="proBrand" label="品牌" width="140"></el-table-column>
					<el-table-column prop="kinName" label="分类" width="120"></el-table-column>
					<el-table-column prop="proBen" label="成本" width="90"></el-table-column>
					<el-table-column prop="proWill" label="参考价" width="90"></el-table-column>
					<el-table-column prop="proSale" label="零售价" width="90"></el-table-column>
					<el-table-column prop="proUnit" label="单位" width="90"></el-table-column>
					<el-table-column prop="proDate" label="建档时间" width="110"></el-table-column>
					<el-table-column prop="proNote" label="备注" width="200" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<!-- 利用作用域插槽，将当前行作为参数传给了方法del -->
							<!-- s.$index可以获取当前行数据的索引 -->
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修 改</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog title="新增产品" :visible.sync="dialogFormVisible">
					<el-form :model="form" label-width="100px">
						<el-form-item label="产品名称">
							<el-input v-model="form.proName" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="产品规格">
							<el-input v-model="form.proSpe" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="产品分类">
							<el-select v-model="form.kinName" placeholder="请选择">
								<el-option v-for="item in kind" :key="item.kinId" :label="item.kinName" :value="item.kinName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="单位">
							<el-input v-model="form.proUnit" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="成本">
							<el-input v-model="form.proBen" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="建议售价">
							<el-input v-model="form.proWill" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="零售价">
							<el-input v-model="form.proSale" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="品牌">
							<el-select v-model="form.proBrand" placeholder="请选择">
								<el-option v-for="item in brand" :key="item.braId" :label="item.braName" :value="item.braName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="上传图片">
							<el-input v-model="form.proPic" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" :rows="3" v-model="form.proNote" autocomplete="off" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer" style="height: 50px;">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button v-show="!isedit" type="primary" @click="sureAddProduct" :disabled="disable3">确 定</el-button>
					</div>
				</el-dialog>
				
				<el-dialog title="修改产品" :visible.sync="dialogFormVisible1">
					<el-form :model="form" label-width="100px">
						<el-form-item label="产品名称">
							<el-input v-model="form.proName" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="产品规格">
							<el-input v-model="form.proSpe" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="产品分类">
							<el-select v-model="form.kinName" placeholder="请选择">
								<el-option v-for="item in kind" :key="item.kinId" :label="item.kinName" :value="item.kinName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="单位">
							<el-input v-model="form.proUnit" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="成本">
							<el-input v-model="form.proBen" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="建议售价">
							<el-input v-model="form.proWill" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="零售价">
							<el-input v-model="form.proSale" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="品牌">
							<el-select v-model="form.proBrand" placeholder="请选择">
								<el-option v-for="item in brand" :key="item.braId" :label="item.braName" :value="item.braName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="上传图片">
							<el-input v-model="form.proPic" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" :rows="3" v-model="form.proNote" autocomplete="off" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer" style="height: 50px;">
						<el-button @click="dialogFormVisible1 = false">取 消</el-button>
						<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
					</div>
				</el-dialog>
			</div>
			<el-row>
				<div align="center" style="margin-top: 20px;">
					<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
				</div>
			</el-row>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				disable3:false,
				tableproduct:[],
				form: {
					proId: '',
					proPic:'',
					proName: '',
					proSpe: '',
					kinName:'',
					proUnit:'',
					proBen: '',
					proWill:'',
					proSale:'',
					proBrand:'',
					proNote: ''
				},
				kind: [],
				brand: [],
				multipleSelection: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				isedit: false,
				myindex: -1,
				search: ''
			}
		},
		mounted(){
			var _this = this;
			this.$axios.post("findproduct").then(res=>{
				if(res.data){
					_this.tableproduct = res.data.product;
					_this.kind = res.data.kind;
					_this.brand = res.data.brand;
				}else{
						alert("出错了！！");
					}
				
			}).catch(ex=>{
				alert("出错了8888");
			})
		},
		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			add() {
				this.dialogFormVisible = true;
			},
			addproduct(){
				//增加
				this.form={
					proId: '',
					proPic:'',
					proName: '',
					proSpe: '',
					kinName:'',
					proUnit:'',
					proBen: '',
					proWill:'',
					proSale:'',
					proBrand:'',
					proNote: ''
				}
				this.dialogFormVisible = true;
			},
			sureAddProduct() {
				//确认添加
				this.$axios.post("addproduct",this.form).then(v=>{
					console.log(v)
					if(v.data){
						this.key2 = v.data.ans;
						if (this.key2 == 'y') {
							alert("新增成功！！");
							this.$router.push("/product");
						} else {
							alert("入库失败,产品已存在!!");
						}
					}else{
						alert("出错了！！");
					}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
				this.dialogFormVisible = false;
				this.tableproduct.push(this.form);
			},
			//删除
			handleDelete(index, row) {
				var _this = this;
				this.$confirm(
					"你确定要删除该数据吗？",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "删除成功"
					});
					//index是索引，id是数据key值
					_this.tableData.splice(index, 1);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})

			},
			//修改
			handleEdit(index, row) {
				this.isedit = true;
				this.dialogFormVisible1 = true;
				this.form = {
					proId: row.proId,
					proName: row.proName,
					proSpe: row.proSpe,
					kinName: row.kinName,
					proUnit:row.proUnit,
					proBen: row.proBen,
					proWill: row.proWill,
					proSale: row.proSale,
					proPic: row.proPic,
					proBrand: row.proBrand,
					proNote: row.proNote
				};
				this.myindex = index;
			},
			sureUpdate: function() {
				this.$axios.post("updateproduct", this.form).then(v => {
					console.log(v)
					if (v.data) {
						alert("修改成功！！")
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				//根据form.id确认要修改的webs的id值
				this.tableproduct.splice(this.myindex, 1, this.form);
				//确认修改
				this.dialogFormVisible1 = false;
				this.isedit = false; //修改状态结束
			},
			//刷新
			winReload:function(cond){
				this.$router.go(0);
			}
		}
	}
</script>

<style>
	#pro {
		margin: 5px 15px 5px 15px;
	}
	#top {
		width: 100%;
		height: 50px;
		border: 1px solid #FF0000;
	}

	#top-left1 {
		width: 50px;
		margin-top: 7px;
		margin-left: 40px;
		float: left;
	}

	#proheander-left {
		margin: 0px 15px 8px 5px;
		float: left;
	}

	#prohead-left1 {
		margin: 20px 5px 8px 10px;
		float: left;
	}

	#prohead-left2 {
		margin-top: 11px;
		margin-bottom: 10px;
		float: left;
	}

	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
